import React from 'react'
import { Col, Divider, Input, PageHeader } from 'antd'
import BreadCrumbs from '../tws-layout/breadcrumb'
import { Link, withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

const Search = Input.Search
const navMenuItemStyle = {
  fontSize: '15px',
  display: 'inline-block',
  margin: '6px 0'
}

class NavMenu extends React.Component {

  isHomePage = () => {
    return window.location.href.endsWith('#/')
  }

  render () {
    const {user} = this.props
    const {roles=[]} =user
    return <div>
      <PageHeader
        onBack={this.isHomePage()
          ? null
          : () => window.history.back()}
        subTitle={<BreadCrumbs/>}
        extra={
          <Col>
            <Search
              enterButton
              placeholder=''
              onSearch={value => console.log(value)}
              style={{width: 300}}
            />
            <Divider type='vertical'/>
            <Link to='/my-subscriptions' style={navMenuItemStyle}>我的订阅</Link>
            {
              user.isPublisher
                ?
                <span><Divider type='vertical'/>
                <Link to='/serials-management' style={navMenuItemStyle}>我的发布</Link>
                </span>
                : ''
            }
            {
              roles.includes(9)
                ? <span><Divider type='vertical'/>
                <Link to='/publisher-management' style={navMenuItemStyle}>发布者管理</Link>
                </span>
                : ''
            }
          </Col>
        }/>
      <Divider style={{marginTop: 10}}/></div>
  }
}

const mapStateToProps = ({user}) => (
  {user})
export default withRouter(connect(mapStateToProps, null)(NavMenu))

